<template>
    <div>
        <el-row>
            <el-col :span="20" :offset="3">
                <el-row :gutter="20">
                    <el-col :span="10" v-for="(item, index) in softListMap" :key="index" style="margin-bottom: 10px;">
                        <el-card :body-style="{ padding: '0px' }">
                            <div style="padding: 14px">
                                <span>{{ item.name }}</span>
                                <div class="descs">{{ item.descs }}</div>
                                <div class="bottom">
                                    <time class="time">{{ formatDate(item.createTime) }}</time>
                                    <el-link @click="downLoad(item)">下载</el-link>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { ref } from "vue"
import dayjs from 'dayjs'
export default {
    data() {
        return {
            page: 1,
            pageSize: 20,
            search: {},
            total: 0,
            softListMap: []
        }
    },
    created() {
        this.loadData()
    },
    methods: {
        loadData() {
            this.$axios.post(`/soft/page/${this.page}/${this.pageSize}`, this.search).then(({ data }) => {
                if (data.code == 0) {
                    if (data.rows.length > 0) {
                        this.softListMap.push(...data.rows)
                        this.total += data.total
                    }
                } else {
                    this.$message.error(data.msg)
                }
            }).catch(() => {
                this.$message.error("查询失败，请联系管理员！")
            })
        },
        downLoad(item) {
            window.open(item.downurl)
        },
        formatDate(date) {
            return dayjs(date).format('YYYY/MM/DD') // '25/01/2019'
        }
    },
    watch: {
        '$route'(to, from) {
            this.page = this.$route.query.page || 1
            this.pageSize = 10
            this.loadData()
        }
    }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
.bottom {
    display: flex;
    justify-content: space-between;
}

.descs {
    text-indent: 2rem;
    font-size: 0.9rem;
    font-weight: 500;
    height: 40px;
    color: #313131;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* .bottom:hover .button {
    background-color: rgba(101, 102, 102, 0.5);
} */
</style>